<template>
  <div class="app-container">
    <div class="container-fluid">
      <div class="filter-container addUserList">
        <div style="padding-bottom: 20px" class="at">
          <h3><span>Hong Kong Paralympic Day 2018</span>  <span>香港殘奧日2018</span>  <span>20/11/2018</span></h3>
          <h4><span>Men's Foil Team</span> <span>男子花劍團體</span> <span>Cat A</span> <span>個人</span></h4>
        </div>
        <el-form ref="form" :model="form" style="text-align: right;display: flex" class="event-from">
          <el-input v-model="form.input1" placeholder="UserID/Name" style="width: 270px"></el-input>
          <el-input v-model="form.input2" placeholder="Result" style="width: 260px"></el-input>
          <el-input v-model="form.input3" placeholder="Ranking" style="width: 200px"></el-input>
          <el-input v-model="form.input4" placeholder="Awards" style="width: 200px"></el-input>
          <el-input v-model="form.input6" placeholder="Notices" style="width: 230px"></el-input>
          <button type="button" class="el-button el-button--success"  @click="onSubmit"><span>Add</span></button>
        </el-form>
      </div>
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                stripe>
        <el-table-column label="User ID">
          <template slot-scope="scope">
            <span>{{scope.row.number}}</span>
          </template>
        </el-table-column>
        <el-table-column label="Name">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="Result">
          <template slot-scope="scope">
           1
          </template>
        </el-table-column>
        <el-table-column label="Ranking">
          <template slot-scope="scope">
           1
          </template>
        </el-table-column>
        <el-table-column label="Awards">
          <template slot-scope="scope">
          Gold
          </template>
        </el-table-column>
        <el-table-column label="Notices">
          <template slot-scope="scope">
            XXXX
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="" width="100">
          <template slot-scope="scope">
            <div style="text-align: center;">
              <el-button type="text" size="small" @click="del">
                <img src="../../assets/images/del.svg" class="btn-icon">
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
    import {
        getInterList
    } from '@/api/home'

    export default {
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        data() {
            return {
                list: null,
                listLoading: true,
                link: '/event/addEdit',
                form: {
                    input1: '',
                    input2: '',
                    input3: '',
                    input4: '',
                    input5: '',
                    input6: '',
                    input7: ''
                }
            }
        },
        created() {
            this.fetchData()
            // this.restaurants = this.loadAll()
        },
        methods: {
            onSubmit() {
                this.$message('submit!')
            },
            fetchData() {
                getInterList().then(response => {
                    this.list = response.data.items
                    this.listLoading = false
                })
            },
            del() {
                this.$confirm('This action will permanently delete this item. Do you want to continue?', 'Tips', {
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: 'success!'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            }
        }
    }
</script>
<style>
  .event-from{
    text-align: right;
  }
  .event-from .el-input{
    margin-right:5px;
  }
  .event-from .el-input input{
    border-radius: 0;
  }
  .addUserList .at span{color: #586982;margin-right: 20px;}
</style>
